<!--
 * @description  : 实地核查方位图-选择网格页面
 * @create       : 2024-7-30
-->

<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"> </theme-navbar>
    <!-- #endif -->
    <view class="box-search-lay" :style="{ top: isHideNav ? 0 : '44px' }">
      <u-search shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true" placeholder="请输入关键词搜素" v-model="searchKey" @custom="handleSearchList"></u-search>
    </view>

    <view class="content u-page">
      <u-radio-group v-model="curChecked">
        <me-table :i="0" :index="0" :top="112" :load-data="loadData" :height="getListViewHeight()" :init-load="initLoad" ref="mescrollItem0">
          <view slot-scope="{ data }" class="list-item-root form-style">
            <u-radio :name="data.gridUuid" :label-disabled="false" @change="handleGridChange(data)">
              <view style="font-size:30rpx" class="p-8">
                <text class="sub-title">网格名称：</text>
                <text>{{ data.gridName }}</text>
              </view>
              <view style="font-size:30rpx" class="p-8">
                <text class="sub-title">承载量：</text>
                <text>{{ data.licPlanQty }}</text>
              </view>
              <view style="font-size:30rpx" class="p-8">
                <text class="sub-title">当前商户数：</text>
                <text>{{ data.licCurrQty }}</text>
              </view>
            </u-radio>
          </view>
        </me-table>
      </u-radio-group>
    </view>

    <view class="submit-btns btn-other-cls">
      <u-button class="u-btn" type="primary" @click="submitGrid">
        确定
      </u-button>
    </view>
  </view>
</template>

<script>
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import meTable from "@/components/me-table.vue";
import certificateService from "@/service/certificate/certificate.service.js";

export default {
  onLoad(opt) {
    this.curChecked = opt.curChecked;
  },
  components: {
    meTable
  },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      searchKey: "",
      initLoad: false,
      checkedGridInfo: {},
      curChecked: ""
    };
  },
  methods: {
    getListViewHeight() {
      let p = this.$u.sys().windowHeight - 44 - 48 - uni.upx2px(10) - this.$u.sys().statusBarHeight + "px";
      // #ifdef H5-DINGDING || H5-WECHAT
      p = this.$u.sys().windowHeight - uni.upx2px(10) - 48 - this.$u.sys().statusBarHeight + "px";
      // #endif
      return p;
    },
    loadData(page) {
      if (!this.initLoad) {
        return new Promise((resolve, reject) => {
          resolve({
            count: 0,
            data: []
          });
        });
      }
      let params = {
        page: page.num,
        limit: page.size,
        gridName: this.searchKey
      };
      return new Promise((resolve, reject) => {
        certificateService
          .getGridNameList(params)
          .then(res => {
            if (res.code == 0 && res.success) {
              resolve({
                count: res.count,
                data: res.data
              });
            } else {
              this.$u.toast("请求失败:" + res.msg);
              resolve({
                count: 0,
                data: []
              });
            }
          })
          .catch(err => {
            this.$u.toast("请求失败:" + err);
            resolve({
              count: 0,
              data: []
            });
          });
      });
    },
    submitGrid() {
      if (!Object.keys(this.checkedGridInfo).length && !this.curChecked) {
        return;
      }
      const { gridUuid, gridCode, gridName, licPlanQty, licCurrQty } = this.checkedGridInfo;
      this.$u.route({ type: "navigateBack" });
      if (!gridUuid) return;
      uni.$emit("setGridInfo", {
        info: JSON.stringify({ gridUuid, gridCode, gridName, licPlanQty, licCurrQty })
      });
    },
    handleSearchList() {
      this.initLoad = true;
      this.getMescroll(0).triggerDownScroll();
    },
    handleGridChange(info) {
      this.checkedGridInfo = info;
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  background-color: #f3f4f5;
  min-height: calc(100vh - 46px);
  padding-bottom: 160rpx;
}

.box-search-lay {
  background-color: #fff;
  position: fixed;
  // #ifndef H5-DINGDING
  top: 44px;
  // #endif
  // #ifdef H5-DINGDING
  top: 0px;
  // #endif
  z-index: 999;
  width: 100%;
  overflow: hidden;
  padding: $cm-search-padding-row $cm-search-padding-column;
}

.key-search {
  width: 100%;
  margin: auto;
  padding-left: 2.5%;
  padding-right: 2.5%;
  line-height: 48px;
}

.list-item-root {
  margin: 10px 0;
  overflow: hidden;
  background: #ffffff;
}

.form-style {
  padding: 0rpx 8rpx;
}

/deep/ .u-radio-group {
  display: contents;
}
/deep/ .u-radio {
  flex-wrap: nowrap;
  align-content: flex-start;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 96% !important;
}

.p-8 {
  padding-top: 16rpx;
}

.u-size-default {
  font-size: 28rpx;
}
</style>
